<template>
    <!--网站底部-->
    <div class="footer">


        <el-row :gutter="24" style="padding-top: 30px">
            <el-col :sm="8">
                <el-row :gutter="24" class="footer-title">
                    <el-col :span="4" :offset="7">联系博主</el-col>
                </el-row>
                <el-row :gutter="24" class="footer-content">
                    <el-col :sm="10" :offset="4">
                        QQ：59968873<br>
                        邮箱：59968873@qq.com
                        <img alt="微信" src="../assets/wechat.jpg" style="width: 80px; height: 80px">
                    </el-col>
                    <!--添加一个二维码图片-->
                    <!--  <el-col :sm="10">
                        <el-image :src="src" style="width: 80px; height: 80px"></el-image>
                      </el-col>-->
                </el-row>
            </el-col>


            <el-col :sm="8">
                <el-row :gutter="24" class="footer-title">
                    <el-col :span="24"></el-col>
                </el-row>
                <el-row :gutter="24" class="footer-content">
                    <el-col :span="24" style="font-size: 15px">

                    </el-col>
                </el-row>
            </el-col>
            <el-col :sm="8">
                <el-row :gutter="24" class="footer-title">
                    <el-col :span="24">网站信息</el-col>
                </el-row>
                <el-row :gutter="24" class="footer-content">
                    <el-col :span="24">
                        {{'总访问量: '+pv}} <br>
                        {{'访客量: '+uv}}<br>
                        当前IP：{{yourIp}} <br>
                        当前属地：{{address}}
                    </el-col>
                </el-row>
            </el-col>

        </el-row>
        <el-divider></el-divider>

        <el-row :gutter="24" style="height: 50px;margin-top: 25px;font-size: 12px">
            <el-col :span="24">
                Copyright&nbsp;&copy;&nbsp;2018-2022&nbsp;cili&nbsp;Blog.&nbsp;此网站为个人所有，仅供交流学习使用。&nbsp;
            </el-col>
            <a href="https://beian.miit.gov.cn" target="_blank" style="color: #eef6ff;text-decoration: none;">京ICP备2020041734号-1</a>
        </el-row>

    </div>
</template>

<script>
    export default {
        name: "Footer",
        data() {
            return {
                pv: 0,
                uv: 0,
                input: "微信图片地址",
                src: '../../assets/goLoginTop.png',
                yourIp: sessionStorage.getItem('yourIp'),
                address: sessionStorage.getItem('address'),

            }
        },
        methods: {
            //获取pv和uv
            getPVAndUV() {
                const _this = this
                this.$axios.get('/visitornum').then(res => {
                    _this.uv = res.data.data.uv
                    _this.pv = res.data.data.pv
                })
                // 路由变化，就给ip赋值
                this.yourIp = sessionStorage.getItem('yourIp')
                this.address = sessionStorage.getItem('address')
            },
            //给ip赋值
            getMyIP() {
                if(null == sessionStorage.getItem('yourIp')){
                    this.$axios.get('/getIpInfo').then(res=>{
                        //网络ip地址
                        sessionStorage.setItem('yourIp', res.data.data.ip);
                        //属地
                        sessionStorage.setItem('address', res.data.data.regionName);
                    })
                }
                if (null == sessionStorage.getItem('yourIp') && false) {
                     $.ajax({
                        // url: 'http://ip-api.com/json/',
                        url: 'http://cilicili.top:8083/server/getIpInfo',
                        dataType: 'jsonp',
                        // 发送到服务端的参数名称，默认值为 callback
                        jsonp: 'callback',
                        // 自定义的回调函数名称，默认值为 jQueryxxx 格式
                        jsonpCallback: 'abc',
                        success: function (res) {
                            // console.log(res)
                            // this.yourIp=res.query
                            //网络ip地址
                            sessionStorage.setItem('yourIp', res.query);
                            //属地
                            // sessionStorage.setItem('address', res.country + "  " + res.city);
                            sessionStorage.setItem('address', res.isp);
                        }
                    })
                }

            }
        },
        // 监听,当路由发生变化的时候执行
        watch: {
            '$route': 'getPVAndUV'
        },
        created() {
            this.getPVAndUV()
            this.getMyIP()
        }
    }
</script>

<style scoped>
    .footer-title {
        font-size: 13px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .footer-content {
        font-size: 13px;
    }

    .footer {
        margin: 0 auto;
        text-align: center;
        min-height: 20px;
        max-width: 100%;
        padding: 0 15px;
    }
</style>
